import React from 'react';
import { Input, Icon } from 'antd';
import './EditabalCell.css';

class EditableCell extends React.Component {
    state = {
      value: this.props.value,
      editable: false,
    }
    handleChange = (e) => {
      const val = e.target.value;
      const value = val;
      this.setState({ value });
    }
    check = () => {
      this.setState({ editable: false });
      if (this.props.onChange) {
        this.props.onChange(this.state.value);
      }
    }
    edit = () => {
      this.setState({ editable: true });
    }
    render() {
      const { value, editable } = this.state;
      return (
        <div className="editable-cell">
          {
            editable ? (
              <div className="editable-cell-input-wrapper">
                <Input
                  style={{ width: '80%', marginRight: '6%' }}
                  value={value}
                  onChange={this.handleChange}
                  onPressEnter={this.check}
                />
                <Icon
                  type="check"
                  className="editable-cell-icon-check"
                  onClick={this.check}
                />
              </div>
  ) : (
    <div className="editable-cell-text-wrapper">
      {value || ' '}
      <Icon
        type="edit"
        style={{ marginLeft: '6%' }}
        className="editable-cell-icon"
        onClick={this.edit}
      />
    </div>
  )}
        </div>
      );
    }
}

export default EditableCell;
